<template>
    <el-table :data="data">
        <el-table-column
            v-for="col in columns"
            :key="col.key"
            :prop="col.dataIndex"
            :label="col.title"
            :width="col.width"
        >
            <template #default="scope">
                <template v-if="col.children">
                    <component
                        v-for="(child, i) in col.children"
                        :key="i"
                        :is="child.type"
                        v-bind="child.props"
                        @click="() => child.onClick && child.onClick(scope.row)"
                    >
                        {{ child.name }}
                    </component>
                </template>
                <template v-else>
                    <!-- scope.row为当前行数据 col.dataIndex为当前行的字段 -->
                    {{ scope.row[ col.dataIndex ] }}
                </template>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
import { defineComponent } from 'vue'

// interface ColumnChild {
//     type: string;
//     name: string | number;
//     props: object;
// }

// interface Column {
//     title: string;
//     dataIndex: string;
//     key: string | number;
//     children?: ColumnChild[]
// }

// interface CustomTableProps {
//     data: object[];
//     columns: Column[];
// }

export default defineComponent({
    props: ['data', 'columns'],
});

</script>

